package com.huluobo.a2303mdmdemo.demo

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Send
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
import com.huluobo.a2303mdmdemo.R

/**
 *  Created by LC on 2025/8/14.
 */

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyImage() {
    Column(verticalArrangement = Arrangement.spacedBy(10.dp), modifier = Modifier.padding(10.dp)) {
        Image(
            //painterResource 加载的是Drawable文件夹中的图片资源
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = "",
            modifier = Modifier
                //包含宽高的大小都是40dp
                .size(40.dp)
                //裁剪为圆形
                .clip(CircleShape)
        )
        Image(
            painter = painterResource(id = R.drawable.baseline_3d_rotation_24),
            contentDescription = "",
            modifier = Modifier.size(40.dp)
        )
        //加载系统资源图标
        Image(imageVector = Icons.Default.Favorite, contentDescription = "", modifier = Modifier.size(40.dp))
        //同样是加载系统自带图标,默认都是黑色,但是可以修改颜色 tint 修改颜色
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "",
            tint = Color.Red,
            modifier = Modifier.size(40.dp)
        )

        //加载网络图片,一般要去使用图片内容的裁剪来缩放一下图片的大小填充满整个控件
        AsyncImage(
            model = "https://img1.baidu.com/it/u=4214113141,2036563917&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1729098000&t=0662d2b383091882ccdd43ad060de2a7",
            contentDescription = "",
            modifier = Modifier
                .size(300.dp)
                //背景 背景的形状
                .background(Color.Black, CircleShape)
                //图片的形状
                .clip(CircleShape),
            //图片内容裁剪(缩放) Crop充满当前控件
            contentScale = ContentScale.FillWidth
        )

        OutlinedTextField(value = "有什么问题问我呢?", onValueChange = {},
            //右侧图标
            trailingIcon = {
                Icon(imageVector = Icons.Default.Send, contentDescription = "")
            })

        Button(onClick = {}, modifier = Modifier.fillMaxWidth()) {
            Text(text = "注册")
        }
    }
}